<template>
  <div class="header">
    <div class="top-header">
      <div class="left">
        <span class="company-name">{{ group.name }}</span>
        <i v-if="group.isDefault !== 1" class="icon-edit" @click="openEditNameDialog"></i>
      </div>
      <div class="right">
        <span class="item" @click="openDialog('memberManage')">
          <i class="icon-member"></i>
          <span>成员管理</span>
        </span>
        <span class="item" @click="openDialog('pushSetting')">
          <i class="icon-push"></i>
          <span>推送设置</span>
        </span>
      </div>
    </div>
    <div class="second-header">
      <template v-if="group.companyIds.length > 0">
        <div class="tabs">
          <span class="tab" :class="{ 'current-tab': currentTab.code === tab.code }" v-for="tab in tabs" :key="tab.code" @click="changeTab(tab)">{{ tab.name }}</span>
        </div>
        <div class="filters">
          <vc-filter :menus="menus"></vc-filter>
          <span class="total-num">共计 <sapn style="color: rgba(255, 89, 89, 1)">{{ totalNum }}</sapn> 条</span>
        </div>
      </template>
    </div>
  </div>
  <div class="content-container">
    <template v-if="group.companyIds.length > 0">
      <div class="table">
        <vc-table
          :loading="loading"
          :tableData="tableData"
          :columns="columns"
          :total="totalNum"
          :pageSize="queryData.limit"
          :pageNum="pageNum"
          :defaultSort="{ field: 'date', order: 'desc' }"
          @page-change="handleCurrentChange"
          @sort-change="sortChange"
        />
      </div>
    </template>
    <template v-else>
      <vc-nodata :type="204">
        <span>组合内暂无成员，</span>
        <span class="nodata-add-btn" @click="openDialog('memberManage')">去添加</span>
      </vc-nodata>
    </template>
  </div>

  <!-- 编辑组合名称Dialog -->
  <group-edit-dialog v-model="editNameDialog" :group="group" @change="$emit('changeGroupName')"></group-edit-dialog>
</template>

<script setup lang="ts">
import { useScreen } from '../useScreen';
import { useTable } from '../useTable';
import GroupEditDialog from './group-edit-dialog.vue';
import { type IGroup, getScreen, getGroupNews } from '../apis';

interface Props {
  group: IGroup;
}
const { group } = defineProps<Props>();

const emit = defineEmits<{
  (e: 'changeGroupName'): void;
  (e: 'open', val: string): void;
}>();

const editNameDialog = ref(false);
const openEditNameDialog = () => {
  editNameDialog.value = true;
};

const openDialog = (name: string) => {
  emit('open', name);
};

const { tabs, currentTab, queryData, initQueryData, menus } = useScreen();
const changeTab = (tab: any) => {
  if (tab.code !== currentTab.value.code) {
    currentTab.value = tab;
    queryData.codeLevel1 = tab.code;
    queryData.codeLevel2 = '';
    queryData.codeLevel3 = '';
    if (!tab.code) {
      menus.value[1].options = [];
      menus.value[1].hide = true;
    } else {
      menus.value[1].options = tab.values;
      menus.value[1].hide = true;
      nextTick(() => {
        menus.value[1].hide = false;
      });
    }
  }
};
const pageNum = computed(() => {
  return Math.floor(queryData.offset / queryData.limit) + 1;
});

const { loading, totalNum, tableData, columns } = useTable();
const handleCurrentChange = (page: number) => {
  queryData.offset = (page - 1) * queryData.limit;
};
const sortChange = (event) => {
  const { field, order } = event;
  if (order) {
    if (field === 'date') {
      queryData.sortRule = `firstEntryDT:${order}`;
    }
    if (field === 'labels') {
      queryData.sortRule = `codeLevel3:${order}`;
    }
  } else {
    queryData.sortRule = '';
  }
};

const getScreenData = async () => {
  loading.value = true;
  const screenRes = await getScreen();
  tabs.value = screenRes;
  tabs.value.unshift({ code: '', name: '全部', level: 1, values: [] });
  getGroupNewsList();
};
const getGroupNewsList = async () => {
  loading.value = true;
  const res = await getGroupNews(group.id, queryData);
  loading.value = false;
  totalNum.value = res.total;
  tableData.value = res.items;
};

watch(
  () => group.id,
  (val) => {
    if (val) {
      initQueryData();
      getScreenData();
    }
  }
);

watch([() => queryData.offset, () => queryData.sortRule], () => {
  getGroupNewsList();
});

watch(
  [() => group.companyIds, () => queryData.codeLevel1, () => queryData.codeLevel2, () => queryData.codeLevel3, () => queryData.years],
  () => {
    queryData.offset = 0;
    getGroupNewsList();
  },
  { deep: true }
);
</script>

<style lang="scss" scoped>
.header{
  // display: flex;
  background-color: #FFFFFF;
  .top-header {
    padding: 15px 20px 9px 24px;
    display: flex;
    justify-content: space-between;
    .left {
      display: flex;
      gap: 11px;
      .company-name {
        font-size: 16px;
        font-weight: 600;
        color: rgba(51, 51, 51, 1);
        line-height: 32px;
      }
      .icon-edit {
        display: inline-block;
        width: 16px;
        height: 16px;
        margin: auto;
        background-image: url('');
        background-repeat: no-repeat;
        background-size: 100% 100%;
        cursor: pointer;
      }
    }
    .right {
      .item {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        font-size: 14px;
        margin-left:12px;
        color: #666666;
        font-weight: 400;
        cursor: pointer;
        width: 100px;
        height: 32px;
        background: #FFFFFF;
        border-radius: 4px 4px 4px 4px;
        opacity: 1;
        border: 1px solid #E3E3E3;
      }
      .icon-member,
      .icon-push {
        display: inline-block;
        margin-left: 10px;
        width: 15px;
        height: 13px;
        background-repeat: no-repeat;
        background-size: 100% 100%;
      }
      .icon-member {
        background-image: url('');
      }
      .icon-push {
        background-image: url('');
      }
    }
}
  .second-header{
    display: flex;
    flex-direction: column;
    .tabs {
      padding: 0 0 16px 24px;
      width: 100%;
      display: inline-flex;
      align-items: center;
      gap: 24px;
      font-size: 14px;
      font-weight: 400;
      border-bottom: 1px solid #f0f0f0;
      color: #666666;
      .tab {
        height: 24px;
        line-height: 24px;
        cursor: pointer;
      }
      .current-tab {
        position: relative;
        color: #02C680;
        &::after {
          content: '';
          position: absolute;
          left: 50%;
          bottom: -16px;
          transform: translateX(-50%);
          width: 24px;
          height: 3px;
          background-color: #02C680;border-radius: 11px 11px 11px 11px;
          opacity: 1;
        }
      }
    }
}
.filters {
      height: 62px;
      padding: 16px 20px 18px 24px;
      font-size: 13px;
      font-weight: 400;
      display: flex;
      justify-content: space-between;
      line-height: 28px;
      .total-num {
        color: rgba(51, 51, 51, 1);
      }
  }

}

.content-container {
  height: calc(100%);
  background-color: #fff;
  border-left: 14px solid #f5f5f5;
  border-top: 14px solid #f5f5f5;
  overflow-y: auto;
  
  .table {
    padding: 0 40px 0 8px;
    width: 100%;
  }
}

:deep(.vc-nodata__img) {
  margin-top: 160px !important;
  width: 183px !important;
  height: 128px !important;
}
:deep(.vc-nodata__text) {
  padding-top: 30px;
  .nodata-add-btn {
    color: rgba(2, 198, 128, 1);
    cursor: pointer;
  }
}
</style>
